<template>
    <div class="head">
      <!--头部左侧-->
      <div class="head_left">
        <!--logo-->
        <div class="logo" @click="$router.push('/')">
          <div class="logo_svg"><div class="iconfont iconlogo2"></div></div>
          <div class="logo_text">网抑云音乐</div>
        </div>
        <!--前进后退-->
        <div class="prev_next">
          <div class="iconfont iconarrow_left" @click="$router.go(-1)"></div>
          <div class="iconfont iconarrow_right" @click="$router.go(1)"></div>
        </div>
        <!--搜索-->
        <div class="search" ref="search">
          <input type="text" ref="searchInput" 
          placeholder="搜索音乐、视频、歌词"
          style="outline:none;border:none;"
          v-model="keyWords"
          @input="searchKeyUp"
          @click="goSearch" 
          @keyup.13="goSearchView(keyWords)"
          @blur="noSearch">
          <i class="iconfont iconsearch1" ref="searchBtn" @click="goSearchView(keyWords)"></i>
          <div class="triangle-top" v-if="showSearch"></div>
          <!--<el-input  v-model="keyWords" placeholder="搜索音乐/视频/电台/用户" suffix-icon="el-icon-search"></el-input>-->
        </div>
        
      </div>
      <!--头部右侧-->
      <div class="head_right">
        <!--个人信息-->
        <!--未登录-->
        <div class="unlogin" v-show="!isLogin" @click="dialogFromIsShow = true">
          <div class="iconfont iconuser"></div>
          <div>未登录</div>
          <!--登陆表单对话框-->
          <div class="dialog">
            <el-dialog title="登录" :visible.sync="dialogFromIsShow" 
            :modal="true"
            width="20%"
            :append-to-body="true"
            >
              <el-input 
              v-model="phoneNum" placeholder="请输入手机号" 
              prefix-icon="el-icon-phone" clearable >
              </el-input>
              <el-input v-model="password" 
              type="password" placeholder="密码" 
              style="margin-top: 20px;" 
              prefix-icon="el-icon-lock" clearable >
              </el-input>
              <div slot="footer">
                <el-button type="primary" @click="postLoginInfo">登录</el-button>
                <el-button type="warning" @click="quit">取消</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <!--已登录-->
        <div class="isLogin" v-show="isLogin" v-popover:pop>
          <img :src="avatarurl" alt="" @click="profile">
          <div>{{nickname}}</div>
          <el-popover
          placement="top-start"
          
          ref="pop"
          width="240"
          trigger="hover"
          >         
            <preInfo v-if="isLogin" />
          </el-popover>
        </div>

        
        <!--head部分菜单区域-->
        <div class="iconfont iconzhuti"></div>
        <div class="iconfont iconxiaoxi"></div>
        <div class="iconfont iconshezhi"></div>
        <div class="iconfont iconclose"></div>
      </div>
      
    </div>
</template>

<script>
import {_loginBycellphone} from "../../../network/detail"
import {_getSearchSuggest} from "../../../network/search"
import {_getUserPlaylist} from '../../../network/user'
import bus from "../../../util/bus"
import preInfo from "../../../components/content/user/preInfo"
export default {
    name: 'tabbar',
    props: [

    ],
    data() {
        return {
          // 首页收缩关键词
          keyWords:"",
          // 是否登录
          isLogin:false,
          // 显示登录表单
          dialogFromIsShow:false,
          phoneNum:'17379711326',
          password:'lx24112411',
          //用户头像
          avatarurl:'',
          nickname:'',
          showSearch:false,
          timer:0,
          searchSuggest:null,
        };
    },
    computed: {

    },
    created() {
      let user = this.$store.state.user
      if(user != null){
        this.avatarurl = user.avatarUrl
        this.isLogin = true
      }else if(sessionStorage.getItem('cloud_cookie')){
        user = JSON.parse(sessionStorage.getItem('cloudUser'))
        this.avatarurl = user.avatarUrl
        this.nickname = user.nickname
        this.isLogin = true
      }



    },
    mounted() {
      let left = this.$refs.search.offserLeft
      let searchInput = this.$refs.searchInput
      this.getLeft(searchInput,left)
    },
    watch: {

    },
    methods: {
      // 登录
      postLoginInfo(){
        let reg = /^[1]([3-9])[0-9]{9}$/ 
        if(!reg.test(this.phoneNum)){
          return this.$message({
            message:'手机号格式有误'
          })
        }
        _loginBycellphone(this.phoneNum,this.password)
        .then(res => {
          console.log(res.data)
          let data = res.data
          if(data.code == 200){
            // 保存登录标识cookie
            sessionStorage.setItem('cloud_cookie',data.cookie)
            // 保存用户歌单
            this.getUserPlaylist(data.profile.userId)
            this.$store.commit('addUser',data.profile)
            sessionStorage.setItem('cloudUser',JSON.stringify(data.profile))
            bus.$emit('isLogin',data.cookie)
            this.avatarurl = data.profile.avatarUrl
            this.nickname = data.profile.nickname
            this.isLogin = true
            this.dialogFromIsShow = false
            // this.$router.go(0)
            return this.$message({
              type:'success',
              message: '登陆成功'
            })
          }
          this.$message({
            message: data.msg
          })
        })
      },
      // 取消
      quit(){
        this.phoneNum = ''
        this.password = ''
        this.dialogFromIsShow = false
      },
      // 获取搜索历史及热搜框水平偏移量
      getLeft(el,left){
        this.$emit('getoffsetLeft',el,left)
      },
      // 点击输入框
      goSearch(){
        if(this.keyWords != ''){
          this.getSearchSuggest()
        }
        this.$emit('showSearch',true)
        this.$refs.searchBtn.style.color = "#E03F40"
        this.showSearch = true
      },
      // 失去焦点
      noSearch(){
        setTimeout(() => {
          this.$emit('showSearch',false)
          this.showSearch = false
        },100)
        this.$refs.searchBtn.style.color = "#eec1c1"
      },
      //获取搜索建议
      getSearchSuggest(){
        _getSearchSuggest(this.keyWords)
        .then(res => {
          bus.$emit('searchSuggest',{data:res.data.result,key:this.keyWords})
          this.searchSuggest = res.data.result
          })
      },
      // 键盘抬起
      searchKeyUp(){
        if(this.keyWords == ""){
          return false
        }
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getSearchSuggest()
        },500)
        
        
      },
      // 跳转搜索页面
      goSearchView(keywords){
        this.$router.push({path:'/search',query:{keywords}})
      },
      // 跳转用户页
      profile(){
        this.$router.push({path:'/profile'})
      },
      // 保存用户歌单
      getUserPlaylist(uid){
        _getUserPlaylist(uid)
        .then(res =>{
          sessionStorage.setItem('myPlaylist',JSON.stringify(res.data.playlist))
        })
      },
    },
    components: {
      preInfo
    },
};
</script>

<style scoped lang="less">
@itemecolor:#192a56;
@textColor:#fff;
@headTextColor:#eec1c1;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
  
}
.head{
  position: fixed;
  top: 0;
  left: 0;
  height: 49px;
  width: 100vw;
  background-color: @itemecolor;
  .position_flex;
  .head_left{
    .position_flex;
    .logo{
      width: 7rem;
      margin-left: 1rem;
      font-size: 1rem;
      cursor: pointer;
      .position_flex;
      .logo_svg{
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        color: @itemecolor;
        background-color: @textColor;
        div{
          line-height: 1.5rem;
          margin-left: 0.2rem;
        }
      }
      .logo_text{
        color: @textColor;
      }
    }
    .prev_next{
      .position_flex;
      margin-left: 8rem;
      color: @headTextColor;
      div{
        border: 1px solid #353b48;
        padding:3px 5px;
        font-size: 1.1rem;
        cursor: pointer;
      }
    }
    .search{
      margin-left: 1rem;
      width: 13.625rem;
      position: relative;
      z-index: 0;
      i{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 45px;
        border-radius: 10px;
        cursor: pointer;
        color: @itemecolor;
        background-color: @textColor;
      }
      input{
        border-radius: 10px;
        text-indent: 10px
      }
      .triangle-top{
        position: absolute;
        left: 10px;
        bottom: -17px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
    }

    }
    
  }
  .head_right{
    .position_flex;
    color:@headTextColor;
    div{
      margin: 0 .7rem;
      cursor: pointer;
    }
    .unlogin{
      .position_flex(flex-start);
      div{
        margin: 0;
      };
      .dialog .el-dialog{
        background-color: red;
      }
    }
    .isLogin {
      .position_flex;
      position: relative;
      font-size: 12px;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }

    }
    .el-popover>.main{
      background-color: #192a56;
      .position_flex;
    }
    .iconfont{
      font-size: 1.125rem;
    }
    .iconuser{
      font-size: 2rem;
    }
    .iconclose{
      margin-right: 1.5rem;
    }
    
  }
  
}


</style>
